<template>
  <div class="container-pt">
    <van-nav-bar fixed title="详情" @click-left="$router.back()"  left-arrow/>
    <div class="content-box">
      <div class="art-tit">文章标题</div>
      <div class="art-desc">
        <span>时间:2021-11-02</span>
        <span>分类：时政</span>
        <span>阅读(1086)</span>
      </div>
      <van-divider />
      <div class="art-content">
        <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
        <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
        <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
      </div>
    </div>
    <van-cell>
			<h3 slot="title" class="group-title">相关推荐</h3>
		</van-cell>
		<recommend-list/>
    <van-grid clickable class="bot" :column-num="2">
      <van-grid-item icon="like-o" text="收藏"/>
      <van-grid-item icon="thumb-circle-o" text="点赞"  />
    </van-grid>
  </div>
</template>

<script>
import RecommendList from '../components/recommend-list.vue'
export default {
  name:'Show',
   components: { RecommendList },
}
</script>
<style scoped lang="less">
.content-box{
  padding: 20px 20px;
}
.art-tit{
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 20px;
}
.art-desc{
  font-size: 28px;
  color: #aaa;
  span{
    margin-right: 20px;
    
  }
}
.bot{
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/ .van-grid-item__content{
  padding: 20px 0;
}
/deep/ .van-grid-item__text{
  margin-top: 0!important;
}
.group-title {
	color: #1989fa;
}
</style>